<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        body{
            height:700px;
            width:1200px;
            margin:0 auto;
        }
        .div1{
            border:1px solid red;
            width:1000px;
            height:600px;
            position:relative;
            left:100px;
            top:50px;
        }
        .div2{
            border:1px solid;
            width:800px;
            height:400px;
            position:absolute;
            left:100px;
            top:100px;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="div2">absolute:生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过 "left","top","right"以及"bottom"属性进行规定。fixed:生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。relative:生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的left位置添加20像素。static:默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明）。inherit:规定应该从父元素继承position属性的值。</div>
</div>
</body>
</html>